import React,{Component} from 'react'
import * as api from '../../api/detailPro'
export default class Mangify extends Component{
    constructor(props){
        super(props)
        this.state={
            bigImgWidth:0,
            list:[]
        }
    }
    enter(){
        this.refs.mask.style.display = 'block'
        this.refs.big.style.display = 'block'
    }   
    leave(){
        this.refs.mask.style.display = 'none'
        this.refs.big.style.display = 'none'
    }
    move(e){
        let offsetX = e.pageX-300
        let offsetY = e.pageY-171
        let maskLeft = offsetX-this.refs.mask.offsetWidth/2
        let maskTop = offsetY-this.refs.mask.offsetHeight/2
        if(maskLeft<=0){
            maskLeft=0
        }
        if(maskLeft>=this.refs.small.offsetWidth-this.refs.mask.offsetWidth){
            maskLeft=this.refs.small.offsetWidth-this.refs.mask.offsetWidth
        }
        if(maskTop<=0){
            maskTop=0
        }
        if(maskTop>=this.refs.small.offsetHeight-this.refs.mask.offsetHeight){
            maskTop=this.refs.small.offsetHeight-this.refs.mask.offsetHeight
        }
        this.refs.mask.style.left = maskLeft+'px'
        this.refs.mask.style.top = maskTop+'px'
        let o = this.refs.bigPic.offsetWidth/this.refs.smallPic.offsetWidth
		this.refs.bigPic.style.left = -maskLeft*o +"px"
		this.refs.bigPic.style.top= -maskTop*o +"px"
    }
    componentDidMount(){
       
        let width = 400/parseFloat(getComputedStyle(this.refs.mask).width)*parseFloat(getComputedStyle(this.refs.big).width)
        this.setState({
            bigImgWidth:width,
        })
    }
    
    render(){
        console.log(this.props.name)
        return(
            <div ref="mangify" class="mangify">
                <div onMouseMove={(e)=>this.move(e)} onMouseLeave={()=>this.leave()} ref="small" className="small">
                    <img style={{width:'100%'}} ref="smallPic" onMouseEnter={()=>this.enter()} className='smallPic' src={this.props.name.coverImg} />
                    <div ref="mask" class="mask">
                        zoom+
                    </div>
                </div>
                
                <div ref="big" className='big'>
                    <img ref="bigPic" style={
                        {width:this.state.bigImgWidth}
                    } className="bigPic" src={this.props.name.coverImg} />
                </div>
            </div>
        )
    }
}